<template>
  <div>
    <!-- 详细信息 -->
    <el-dialog v-model="infoVisibleComputed" title="详细信息" width="700px" :close-on-click-modal="false" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="审批编号">{{ dataSource?.documentNumber }}</el-descriptions-item>
        <el-descriptions-item label="审批类型">{{ dataSource?.approvalType }}</el-descriptions-item>
        <el-descriptions-item label="合同编号">{{ dataSource?.contractNumber }}</el-descriptions-item>
        <el-descriptions-item label="合同名称">{{ dataSource?.contractName }}</el-descriptions-item>
        <el-descriptions-item label="合同类型">{{ dataSource?.contractType }}</el-descriptions-item>
        <el-descriptions-item label="工程名称">{{ dataSource?.projectName }}</el-descriptions-item>
        <el-descriptions-item label="申请人">{{ dataSource?.applicant }}</el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ dataSource?.applicationTime }}</el-descriptions-item>
        <el-descriptions-item label="申请原因" :span="2">{{ dataSource?.reason }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="infoVisibleComputed = false">我知道了</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 参数信息 -->
    <el-dialog v-model="paramVisibleComputed" title="查看参数" width="760px" :close-on-click-modal="false" append-to-body>
      <el-tabs v-model="paramActiveTabLocal">
        <el-tab-pane label="技术参数" name="tech">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="需求编号">{{ dataSource?.relatedRequirementNumber }}</el-descriptions-item>
            <el-descriptions-item label="系统">{{ dataSource?.techSystem || '核心系统' }}</el-descriptions-item>
            <el-descriptions-item label="接口">{{ dataSource?.techInterface || 'ContractService.apply' }}</el-descriptions-item>
            <el-descriptions-item label="影响模块">{{ dataSource?.impactModule || '合同模块' }}</el-descriptions-item>
            <el-descriptions-item label="其他">{{ dataSource?.techOther || '—' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="业务参数" name="biz">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="项目">{{ dataSource?.projectName }}</el-descriptions-item>
            <el-descriptions-item label="金额">{{ dataSource?.bizAmount || '—' }}</el-descriptions-item>
            <el-descriptions-item label="期限">{{ dataSource?.bizDuration || '—' }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ dataSource?.bizRemark || '—' }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="paramVisibleComputed = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="InfoParamDialog">
import { computed, ref, watch } from 'vue'

const props = defineProps({
  infoVisible: { type: Boolean, default: false },
  paramVisible: { type: Boolean, default: false },
  dataSource: { type: Object, default: null },
  paramActiveTab: { type: String, default: 'tech' }
})

const emit = defineEmits(['update:infoVisible', 'update:paramVisible'])

const infoVisibleComputed = computed({
  get: () => props.infoVisible,
  set: (val) => emit('update:infoVisible', val)
})

const paramVisibleComputed = computed({
  get: () => props.paramVisible,
  set: (val) => emit('update:paramVisible', val)
})

const paramActiveTabLocal = ref(props.paramActiveTab)
watch(
  () => props.paramActiveTab,
  (v) => {
    paramActiveTabLocal.value = v
  }
)
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
</style>
